<template>
  <a-modal
    style="height: 500px"
    :visible="visible"
    title="聊天详情"
    cancelText="取消"
    okText="确定"
    @ok="submit"
    @cancel="cancel"
  >
    <a-timeline >
      <div v-for="(banner,index) in formState.bannerList" :key="index">
        <a-timeline-item>{{banner.content}}</a-timeline-item>
      </div>
    </a-timeline>
    <a-form
      ref="formRef"
      :model="formState1"
      :rules="formRules"
    >
      <a-form-item name="content" label="回复内容">
        <a-textarea v-model:value="formState1.content"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import {defineComponent, reactive, ref, watch,toRaw} from "vue";
import {messageReply, getLetterCount, edit} from "@/api/module/inbox";
import {message} from "_ant-design-vue@2.2.8@ant-design-vue";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
    record: {
      type: Object,
    }
  },
  emit: ["close"],
  setup(props, context) {
    const formRef = ref();
    const formState = reactive([]);
    const formState1 = reactive({});

    const tableRef = ref();


    watch(props, (props) => {
      let record = props.record.content;
      const crystal = toRaw(record);
      formState.bannerList = crystal
    if(props.record.list.length>0){
      formState1.name1 = props.record.list[0].recipientId
      formState1.name2 = props.record.list[0].createBy
      formState1.dialogueId = props.record.list[0].dialogueId
    }else {
      console.log("为空")
    }
    })

    const formRules = {};

    const submit = (e) => {
      console.log(toRaw(formState))

      formRef.value
        .validate()
        .then(() => {
          messageReply(toRaw(formState1)).then((response)=>{
            if(response.success){
              message.success({ content: '保存成功', duration: 1 }).then(()=>{
                cancel();
              });
            }else{
              message.success({ content: '保存失败', duration: 1 }).then(()=>{
                cancel();
              });
            }
          });
        })
        .catch(error => {
          console.log('error', error);
        });
    };

    const cancel = (e) => {
      formRef.value.resetFields();
      context.emit("close", false);
    };
    return {

      submit,
      cancel,
      formRef,
      formState,
      formState1,
      formRules,
      tableRef,
    };
  },
});
</script>
